<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .d2 {
            width: 200px;
            height: 200px;
            background-color: #00FFFF;
        }
        .d3 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }

        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>
<button type="button" onclick="changeBg()">点击改变背景</button>
<button type="button" onclick="setCenter()">添加文字居中</button>
<button type="button" onclick="delCenter()">删除文字居中</button>
<div class="d1">
    这是文字内容
</div>
<script>
    let div = document.querySelector("div");
    // div.style.width = "400px";
    // div.style.height = "400px";
    div.style.borderRadius = "50%";
    let count = 0;

    function delCenter() {
        // div.className = div.className.replace("text-center", "");
        div.classList.remove("text-center");
    }

    function changeBg() {
        // if (count % 2 == 0) {
        //     // className：会覆盖掉原来的样式
        //     div.className = "d1";
        // } else {
        //     div.className = "d2";
        // }
        // count++;
        /*
        toggle(样式名, force)
            样式名：定义的样式名称
            force：
                true，toggle方法就相当于add方法
                false：toggle方法就相当于remove方法
         */
        div.classList.toggle("d2");
    }

    function setCenter() {
        // div.className += " text-center";
        div.classList.add("text-center")
    }

    console.log(div.tagName);
</script>
</body>
</html>